<template>
  <view class="medical-record-list">
    <view class="item-wrap" v-for="(item) in props.list" :key="item.id">
      <view class="upload-time">{{ proxy.utils.date.format(item.uploadTime, 'yyyy-MM-dd') }}</view>
      <view class="item" @tap="goDetail(item)">
        <view class="visit-time">就诊时间：{{ proxy.utils.date.format(item.visitTime, 'yyyy-MM-dd') }}</view>
        <view class="diagnosis-wrap">
          <view class="diagnosis">
            诊断：{{ item.diagnosis }}
          </view>
          <view class="visitHosipital">
            <text class="hosipital">{{ item.hospitalName }}</text>
            <text class="dept">{{ item.departmentName }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import type { IListItem } from '@/api/patient.type'
const { proxy } = getCurrentInstance()

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

const goDetail = (item: IListItem) => {
  uni.navigateTo({
    url: `/pages/archive/medical-detail?id=${item.id}`
  })
}
</script>

<style scoped lang="scss">
.item-wrap {
  padding-top: 32rpx;
  margin: 0 32rpx 0 88rpx;
  .upload-time {
    font-size: 30rpx;
    color: #222222;
    font-weight: bold;
    margin-bottom: 24rpx;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      width: 24rpx;
      height: 24rpx;
      top: 10rpx;
      left: -60rpx;
      background-image: url('https://ainengli.meilianshuke.com/jkhx/patient/time-line-icon.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 2;
    }
  }
  .item {
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    
    padding: 32rpx;
    // height: 206rpx;
    background: #fff;
    border-radius: 16rpx;
    .visit-time {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 22rpx;
    }

    .diagnosis-wrap {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      padding: 32rpx;
      background: #fafafa;
      border-radius: 16rpx;
      .diagnosis {
        font-size: 30rpx;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
      }
      .visitHosipital {
        display: flex;
        gap: 20rpx;
        font-size: 24rpx;
        color: #666;
        text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .hosipital {
          // flex: 1;
          max-width: calc(100% - 184rpx - 20rpx);
        }
        .dept {
          max-width: 184rpx;
        }
      }
    }
  }
}
.medical-record-list {
  position: relative;
  padding-top: 16rpx;
}
.medical-record-list .item-wrap:not(:last-child) {
  position: relative;
}
.medical-record-list .item-wrap:not(:last-child)::before {
  content: " ";
  position: absolute;
  height: 100%;
  top: 42rpx;
  left: -50rpx;
  z-index: 2;
  border-left: 3rpx dotted #e5e6eb;
}
// .medical-record-list::after {
//   content: "";
//   position: absolute;
//   top: 71rpx;
//   left: 39rpx;
//   height: calc(100% - 362rpx);
//   border-left: 1rpx dotted #e5e6eb;
//   // background-color: #e5e6eb;
//   // transform: scaleY(0.5);
//   // transform-origin: top;
// }
</style>
